<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
            @select="handleSelect">
            <el-menu-item index="0">RsShopping</el-menu-item>
            <div class="flex-grow" />
            <el-menu-item :index="(item.id + 1).toString()" v-for="item in goodsTypeOptions.goodsType" :key="item.id"
                @click="handleClick(item.id)">{{ item.goodsType }}</el-menu-item>
            <div class="flex-grow" />
            <el-form :inline="true" :model="pageHelper" class="demo-form-inline">
                <el-form-item label="">
                    <el-input v-model="pageHelper.goodsName" placeholder="请输入商品名" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-avatar :size="50" :src="(store.state as any).user.userInfo.avatar" />
            <el-sub-menu index="1">
                <template #title>{{(store.state as any).user.userInfo.userName}}</template>
                <el-menu-item index="1-1">个人中心</el-menu-item>
                <el-menu-item index="1-2">退出登录</el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import api from '@/api';
import store from '@/store';
import { ElNotification } from 'element-plus';
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const activeIndex = ref('1')
const router = useRouter()

const handleSelect = (key: string, keyPath: string[]) => {
    switch (key) {
        case '0':
            handleClick("")
            break
            case '1-1':
            router.push('/usermanage')
            break
        case '1-2':
            api.user.signOut()
                .then(response => {
                    // 在这里可以处理提交成功后的逻辑
                    router.push({ path: '/userlogin' })
                    store.commit('setToken', null)
                    store.commit('setRoleId', null)
                    ElNotification({
                        title: 'Success',
                        message: response.data.msg,
                        type: 'success',
                        duration: 1500
                    })
                })
                .catch(error => {
                    ElNotification({
                        title: 'Error',
                        message: error.data.msg,
                        type: 'error',
                        duration: 1500
                    })
                    // 在这里可以处理提交失败后的逻辑
                });
            break
        default:
            break
    }
}

const goodsTypeOptions = reactive({
    goodsType: [] as any
})

// 异步请求获取下拉框选项
api.goods.getGoodsTypeList()
    .then(response => {
        goodsTypeOptions.goodsType = response.data.data;
    });

const pageHelper = ref({
    id: '',
    goodsName: '',
})

const handleClick = (id: any) => {
    pageHelper.value.id = id
    router.push({
        name: 'showgoods',
        params: {
            id: id,
            goodsName: pageHelper.value.goodsName
        }
    })
};

const onSubmit = () => {
    handleClick(pageHelper.value.id)
}
</script>

<style>
.flex-grow {
    flex-grow: 1;
}
</style>
